<%= form_for @users_notification_setting, url: users_notification_settings_path do |f| %>
  <div class="crayons-card crayons-card--content-rows">
    <header>
      <h2 class="crayons-subtitle-1">
        <%= t("views.settings.notifications.email") %>
      </h2>
    </header>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_newsletter, class: "crayons-checkbox" %>
      <%= f.label :email_newsletter, "Send me weekly newsletter emails", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_digest_periodic, class: "crayons-checkbox" %>
      <%= f.label :email_digest_periodic, "Send me a periodic digest of top posts from my tags", class: "crayons-field__label" %>
    </div>
    <% if current_user.tag_moderator? %>
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :email_tag_mod_newsletter, class: "crayons-checkbox" %>
        <%= f.label :email_tag_mod_newsletter, "Send me tag moderator newsletter emails", class: "crayons-field__label" %>
      </div>
    <% end %>
    <% if current_user.has_trusted_role? %>
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :email_community_mod_newsletter, class: "crayons-checkbox" %>
        <%= f.label :email_community_mod_newsletter, "Send me community moderator newsletter emails", class: "crayons-field__label" %>
      </div>
    <% end %>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_comment_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_comment_notifications, "Send me an email when someone replies to me in a comment thread", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_follower_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_follower_notifications, "Send me an email when someone new follows me", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_mention_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_mention_notifications, "Send me an email when someone mentions me", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_badge_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_badge_notifications, "Send me an email when I receive a badge", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_unread_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_unread_notifications, t("helpers.label.users_notification_setting.email_unread_notifications", community: community_name), class: "crayons-field__label" %>
    </div>
  </div>

  <div class="crayons-card crayons-card--content-rows">
    <header>
      <h2 class="crayons-subtitle-1 flex items-center">
        <%= t("views.settings.notifications.mobile") %>
      </h2>
    </header>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :mobile_comment_notifications, class: "crayons-checkbox" %>
      <%= f.label :mobile_comment_notifications, t("helpers.label.users_notification_setting.mobile_comment_notifications"), class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :mobile_mention_notifications, class: "crayons-checkbox" %>
      <%= f.label :mobile_mention_notifications, t("helpers.label.users_notification_setting.mobile_mention_notifications"), class: "crayons-field__label" %>
    </div>
  </div>

  <div class="crayons-card crayons-card--content-rows">
    <header>
      <h2 class="crayons-subtitle-1">
        <%= t("views.settings.notifications.general") %>
      </h2>
      <p class="color-base-70">
        <%= t("views.settings.notifications.general_desc_html", page: link_to(t("views.settings.notifications.page"), notifications_path)) %>
      </p>
    </header>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :welcome_notifications, class: "crayons-checkbox" %>
      <%= f.label :welcome_notifications, t("helpers.label.users_notification_setting.welcome_notifications", community: community_name), class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :reaction_notifications, class: "crayons-checkbox" %>
      <%= f.label :reaction_notifications, t("helpers.label.users_notification_setting.reaction_notifications"), class: "crayons-field__label" %>
    </div>
  </div>

  <% if current_user.trusted? %>
    <div class="crayons-card crayons-card--content-rows">
      <h2 class="crayons-subtitle-1">
        <%= t("views.settings.notifications.moderator") %>
      </h2>
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :mod_roundrobin_notifications, class: "crayons-checkbox" %>
        <%= f.label :mod_roundrobin_notifications, t("helpers.label.users_notification_setting.mod_roundrobin_notifications"), class: "crayons-field__label" %>
      </div>
    </div>
  <% end %>

  <div class="crayons-card crayons-card--content-rows">
    <button type="submit" class="crayons-btn"><%= t("views.settings.notifications.save") %></button>
  </div>

<% end %>
